<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>floatPanel</title>
    <!-- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> -->
    <!-- <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" /> -->
    <link rel="stylesheet" type="text/css" href="css/floatPanel.css" />
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script src="js/floatPanel.js" type="text/javascript"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        html,
        body {
            min-height: 100%;
        }

        body::before {
            content: " ";
            display: table;
            height: 0;
            width: 0;
            visibility: hidden;
        }

        .show-box {
            border: 1px solid #000;
            display: inline-block;
            padding: 5px;
            cursor: pointer;
            position: absolute;
        }
        .btn-box {
            border: 1px solid #000;
            display: inline-block;
            padding: 5px;
            cursor: pointer;
            position: absolute;
            top: 50px;
            left: 20px;
        }
        .btn-box button{
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
    <script>
        //获取页面视区宽高
        function pageSize_Print() {
            var winW = document.documentElement.clientWidth;
            var winH = document.documentElement.clientHeight;
            console.log(winW + ' * ' + winH);
            return {
                winW: winW,
                winH: winH
            };
        }
        //页面文档载入完成事件
        document.addEventListener('DOMContentLoaded', function (event) {
            pageSize_Print();
        })

        //窗口大小变化事件
        window.addEventListener('resize', function (event) {
            pageSize_Print();

        })
        /* var a = {
            a:'a1',
            b:{
                b1:'b1',
                b2:'b2',
            },
            d:[1,2,3,4,5],
            e:undefined,
            f:null,
            g:NaN,
            h:false,
        }
        var c = {
            a:'ac',
            b:{
                b1:'cb1',
                b3:'bc3',
            },
            c:'c1',
        }
        function deepClone(target,source){
            if(source != null){
                for(var key in source){
                    if(source.hasOwnProperty(key)){
                        if(Array.isArray(source[key])){
                            target[key] = [];
                        }else if(source[key] === null){
                            target[key] = null;
                            continue;
                        }
                        target[key] = typeof source[key] === 'object' ? deepClone(target[key], source[key]) : source[key];
                    }
                }
                return target;
            }
        } */
    </script>
</head>

<body>
    <div class="outer-container" style="width: 120%; height:2000px;" >
        <div class="btn-box">
            <button id="show">show</button>
            <button id="hide">hide</button>
        </div>
        <div class="show-box" style="top:400px; left:0;">
            <h4 style="text-align:center; font-size:16px; margin:0;">Move your mouse here to show the float panel</h4>
        </div>
        <div class="show-box" style="top:50px; right:0;">
            <h4 style="text-align:center; font-size:16px; margin:0;">Move your mouse here to show the float panel</h4>
        </div>
        <div class="show-box" style="bottom:5px; left:0;">
            <h4 style="text-align:center; font-size:16px; margin:0;">Move your mouse here to show the float panel</h4>
        </div>

    </div>
    <!-- <div class="floatPanel-backdrop"></div>
    <div class="floatPanel active" id="floatPanel">
        <button aria-label="关闭" type="button" class="Button close-button Button-plain">
            <svg class="closeIcon" fill="currentColor" viewBox="0 0 24 24" width="30" height="30">
                <path d="M13.486 12l5.208-5.207a1.048 1.048 0 0 0-.006-1.483 1.046 1.046 0 0 0-1.482-.005L12 10.514 6.793 5.305a1.048 1.048 0 0 0-1.483.005 1.046 1.046 0 0 0-.005 1.483L10.514 12l-5.208 5.207a1.048 1.048 0 0 0 .006 1.483 1.046 1.046 0 0 0 1.482.005L12 13.486l5.207 5.208a1.048 1.048 0 0 0 1.483-.006 1.046 1.046 0 0 0 .005-1.482L13.486 12z"
                    fill-rule="evenodd"></path>
            </svg>
        </button>
        <div class="panel panel-primary">
            <div class="panel-header">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
                Panel content
                <ul>
                    <li>
                        list-item
                    </li>
                    <li>
                        list-item
                    </li>
                    <li>
                        list-item
                    </li>
                </ul>
            </div>
            <div class="panel-footer">
                Panel footer
            </div>
        </div>
        <div class="floatPanel-space"></div>
    </div> -->


    <script>
        jQuery(document).ready(function ($) {
            $('.outer-container').css({'min-height':document.documentElement.clientHeight,});
            $('#show').on('click',function(event){panel2.show();});
            $('#hide').on('click',function(event){panel2.hide();});
        })
    </script>
    <script>
        var panel = null;
        var panel2 = null;
        var  p = null;
        var count = 0;

        function p2me(event){
            console.log(event);
        }
        jQuery(document).ready(function ($) {

            var config = {
                width: 300,
                header: {
                    enabled: true,
                    content: "这是标题,count=" + count,
                },
                footer: {
                    enabled: false,
                    content: "这是脚注",
                },
                body: {
                    enabled: true,
                    content: "这是脚注",
                },
                closeBtn: true,
                backDrop: true,
            }

            //创建panel框架
            panel = FloatPanel('panel').set({
                header: {
                    content: "这是标题",
                },
                width:500,
                floatHeightInvolve: true,
                floatHeight: 20,
                direction:'down',
            });
            $('.show-box').on('mouseenter', function (event) {
                console.log(event)
                panel.set({
                    body: {
                        content: "<div style='height:180px'>"+ (count++) +"</div>"
                    },
                });
                panel.show(event,function(){
                    // panel.top -= 50;
                });
            })
            $('.show-box').on('mouseleave', function (event) {
                panel.hide(event);
            })
            $(panel.node).on('mouseleave', function (event) {
                panel.hide();
            })

            //创建panel框架
            panel2 = FloatPanel('panel2').set({
                closeBtn: true,
            }).show();

            // panel2.mouseenter(p2me);

            // p = FloatPanel('p').show();
        })
    </script>
</body>

</html>